import React, {
	Component
} from 'react';
import {
	observer,
} from 'mobx-react';
import {
	WingBlank,
	Tools,
	Timeline,
	Bubble,
	Icon,
} from 'weaver-mobile';
import {
	withRouter
} from 'react-router-dom';
import {
	RouteLayout
} from 'weaver-mobile-page';
import {
	calculateWidth,
	calculateOffset,
	calculateRestWidth,
	calculateRestOffset,
} from "./util.js";
import Dot from "./Dot.js";
import {isEmpty} from "lodash";
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class AbsencePro extends Component {
	isDataError = (detail, index) => {
		const completeKeys = ['day', 'date', 'sclTime', 'absTime'];

		if (completeKeys.some(key => !detail[key])) {
			Bubble.error(getLabel(506341, "数据异常,请联系管理员!"));
			return;
		};
	}

	componentWillUnmount() {
		const {
			changeTitle,
			mainTitle
		} = this.props.store;

		changeTitle(mainTitle);
	}

	render() {
		const {
			store
		} = this.props, {
			absence
		} = store, {
			absenceDay,
			types,
			details
		} = absence;

		return (
			<RouteLayout>
				<div key="wmPoutePageDemo" className="wm-route-layout wm-demo-route-layout-page">
						{
							!isEmpty(details) && (
								<div className="attendance-absence">
									<WingBlank size="md">
										<div className="attendance-absence-total">
											<span>{`${getLabel(506345,"未出勤")} ${absenceDay} ${getLabel(1925,"天")}`}</span>
										</div>
										<div className="attendance-absence-category">
											{
												types.map(type => {
													const {bgcolor, value} = type;
													return (
														<div className="absence-category-item" key={bgcolor}>
															<div className="item-circle-wrap">
																<div className="category-item-circle" style={{backgroundColor: bgcolor}}/>
															</div>
															<div>{value}</div>
														</div>
													)
												})
											}
										</div>
										<div className="absence-icon-wrap">
											<Icon type="attendance-time" size="lg" color="#fff"/>
										</div>
									</WingBlank>
									<div className="attendance-absence-details">
										<Timeline>
											{
												details.map( (detail,index) => {
													const {day, date, sclTime, absTime} = detail;

													if (this.isDataError(detail, index)) {
														return null;
													}

													const scheduleWidths = calculateWidth(sclTime);
													const scheduleOffsets = calculateOffset(sclTime);
													const restWidths = calculateRestWidth(scheduleWidths, scheduleOffsets);

													return (
														<Timeline.Item key={date} dot={<Dot />}>
															<div className="absence-detail-item">
																<div>
																	<span className="detail-item-day">{`${day}${getLabel(1925,"天")}`}</span>
																	<span className="detail-item-date">{date}</span>
																</div>
																<div className="detail-item-scope">
																	<div className="item-scope-period">
																		{
																			absTime && absTime.map(abs => {
																				return (
																					calculateWidth(abs.time).map((width, index) => {
																						return (
																							<div className="scope-period-absence" style={{width, backgroundColor:abs.bgColor, marginLeft:calculateOffset(abs.time)[index]}} key={abs.time}/>
																						)
																					}) 
																				)
																			})
																		}
																		{
																			restWidths.map( (width,index) => {
																				const offset = calculateRestOffset(scheduleWidths, scheduleOffsets);

																				return (
																					<div className="scope-period-rest" style={{width, marginLeft:offset[index]}} key={offset[index]}/>
																				)
																			})
																		}
																		{
																			sclTime && scheduleWidths.map( (width, index) => {
																				return (
																					<div className="scope-period-schedule" style={{width, marginLeft:scheduleOffsets[index]}} key={scheduleOffsets[index]}/>
																				)
																			})
																		}
																		<div className="scope-period-base" />
																	</div>
																	<div className="item-scope-scale">
																		<span>00:00</span>
																		<span>23:59</span>
																	</div>
																</div>
															</div>
														</Timeline.Item>
													)
												})
											}
										</Timeline>
									</div>
								</div>
							)
						}
				</div>
			</RouteLayout>
		);
	}
}